<template>
  <div class="container">
    <div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上级业务ID" prop="busiTypeParentId">
                <el-input v-model="record.busiTypeParentId" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级业务名称" prop="busiTypeParentName">
                <el-input v-model="record.busiTypeParentName" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item v-if="busiTypeDialog.editType == 'add'" label="业务类型ID" prop="busiTypeId">
                <el-input v-model="record.busiTypeId" placeholder="业务类型ID"></el-input>
              </el-form-item>
              <el-form-item v-if="busiTypeDialog.editType == 'edit'" label="业务类型ID" prop="busiTypeIdDisabled">
                <el-input v-model="record.busiTypeId" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型名称" prop="busiTypeName">
                <el-input v-model="record.busiTypeName" placeholder="业务类型名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序号" prop="sort">
                <el-input v-model="record.sort" placeholder="排序号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型状态" prop="status">
                <el-select v-model="record.status" clearable placeholder="业务类型状态">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否使用授权代理" prop="isUseAgent">
                <el-select v-model="record.isUseAgent" clearable placeholder="是否使用授权代理">
                  <el-option
                    v-for="item in trueOrFalseOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否可移动端审核" prop="isMobileAudit">
                <el-select v-model="record.isMobileAudit" clearable placeholder="是否可移动端审核">
                  <el-option
                    v-for="item in trueOrFalseOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="单据详细查询地址" prop="billDetailAddress">
                <el-input v-model="record.billDetailAddress" placeholder="单据详细查询地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="单据审核地址" prop="billAuditAddress">
                <el-input v-model="record.billAuditAddress" placeholder="单据审核地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea"  v-model="record.remark" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="closePage">关闭</el-button>
        <el-button v-if="busiTypeDialog.editType == 'add'" size="small" type="success" @click="createSave('dataForm')">保存</el-button>
        <el-button v-if="busiTypeDialog.editType == 'edit'" size="small" type="success" @click="createUpdate('dataForm')">更新</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'busiTypeDetail',
    data() {
      let busiTypeIdValid = (rule, value, callback) => {
        if (!value) {
          return callback()
        }
        setTimeout(() => {
          let reg = '[^a-zA-Z0-9_-]+'
          let regus = new RegExp(reg)
          if (!regus.test(value)) {
            callback()
          } else {
            callback(new Error('业务类型ID只能包含字母、数字、_、-'))
          }
        }, 100)
      }
      let sortValid = (rule, value, callback) => {
        if (!value) {
          return callback()
        }
        setTimeout(() => {
          let reg = '[^0-9]+'
          let regus = new RegExp(reg)
          if (!regus.test(value)) {
            callback()
          } else {
            callback(new Error('排序号只能包含数字'))
          }
        }, 100)
      }
      return {
        record: {
          busiTypeId: '',
          busiTypeName: '',
          busiTypeParentId: '',
          busiTypeParentName: '',
          sort: '',
          status: '',
          remark: '',
          isUseAgent: '',
          isMobileAudit: '',
          // billListAddress: '',
          billDetailAddress: '',
          billAuditAddress: ''
        },
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        trueOrFalseOptions: [
          {
            type: 0,
            value: '否'
          },
          {
            type: 1,
            value: '是'
          }
        ],
        recordRules: {
          busiTypeId: [
            { message: '业务类型ID不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 32, message: '最大长度为 32 个字符', trigger: 'blur' },
            { validator: busiTypeIdValid, trigger: 'blur' }
          ],
          busiTypeName: [
            { message: '业务类型名称不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '最大长度为 128 个字符', trigger: 'blur' }
          ],
          sort: [
            { message: '排序号不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 8, message: '最大长度为 8 个字符', trigger: 'blur' },
            { validator: sortValid, trigger: 'blur' }
          ],
          status: [
            { message: '业务类型状态不能为空', required: true, trigger: 'change' }
          ],
          isUseAgent: [
            { message: '是否使用授权代理不能为空', required: true, trigger: 'change' }
          ],
          isMobileAudit: [
            { message: '是否可移动端审核不能为空', required: true, trigger: 'change' }
          ],
          billDetailAddress: [
            { min: 0, max: 500, message: '最大长度为 500 个字符', trigger: 'blur' }
          ],
          billAuditAddress: [
            { min: 0, max: 500, message: '最大长度为 500 个字符', trigger: 'blur' }
          ],
          remark: [
            { min: 0, max: 512, message: '最大长度为 256 个字符', trigger: 'blur' }
          ]
        },
        optType: '' // 操作类型
      }
    },
    props: ['dialogRefreshProp', 'busiTypeDialog'],
    created() {
      this.initPage()
    },
    watch: {
      dialogRefreshProp() { // 普通的watch监听通的watch监听
        this.initPage()
      }
    },
    methods: {
      initPage() {
        this.optType = this.busiTypeDialog.editType
        this.record.busiTypeId = ''
        this.record.busiTypeName = ''
        this.record.busiTypeParentId = ''
        this.record.busiTypeParentName = ''
        this.record.status = ''
        this.record.sort = ''
        this.record.remark = ''
        this.fetchData()
      },
      fetchData() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        if (this.optType === 'add') {
          this.record.status = '0'
          this.record.sort = '01'
          this.record.isUseAgent = 1
          this.record.isMobileAudit = 0
          this.record.busiTypeParentId = this.busiTypeDialog.record.busiTypeParentId
          this.record.busiTypeParentName = this.busiTypeDialog.record.busiTypeParentName
        } else if (this.optType === 'edit') {
          //
          let queryArgs = {
            condition: [
              {
                property: 'busiTypeId',
                value: '',
                type: 'EQ'
              }
            ]
          }
          queryArgs.condition[0].value = this.busiTypeDialog.record.busiTypeId
          this.$store.dispatch('WfBusiTypeSelect', queryArgs).then(res => {
            this.loading = false
            this.record = res.data.records[0]
            if (res.data.records[0]) {
              this.record.sort = res.data.records[0].sort + ''
            }
            this.record.busiTypeParentName = this.busiTypeDialog.record.busiTypeParentName
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      createSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.myValid()) {
              this.saveRecord()
            }
          } else {
            this.$message({
              type: 'error',
              message: '添加失败!'
            })
            console.log('error save!!')
            return false
          }
        })
      },
      createUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.myValid()) {
              this.updateRecord()
            }
          } else {
            this.$message({
              type: 'error',
              message: '更新失败!'
            })
            console.log('error update!!')
            return false
          }
        })
      },
      saveRecord() {
        this.$store.dispatch('WfBusiTypeInsert', this.record).then(res => {
          this.$emit('treeRefresh')
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      updateRecord() {
        this.$store.dispatch('WfBusiTypeUpdateById', this.record).then(res => {
          this.$emit('treeRefresh')
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      closePage() {
        this.$emit('setDialogDisplay')
      },
      myValid() {
        let bool = true
        if (this.record.isMobileAudit === 1) {
          if (this.record.billDetailAddress === '' || this.record.billAuditAddress === '') {
            bool = false
            this.$message({
              type: 'error',
              message: '当类型需要移动审核时，我的单据列表查询地址和单据详细查询地址不能为空!'
            })
          }
        }
        return bool
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
